
<html>
<head>
<title>Create Accordion Menu Using CSS3 Transition</title>
<style>
body {
	font: 13px Arial, Helvetica, sans-serif;
	color: #1e1e1e;
}
#container {
	width: 600px;
	margin: 20px auto;
}
#accordion {
	margin-top: 20px;
}
#accordion .item {
	width: 200px;
	height: 30px; /* height = total height of A child element */
	overflow: hidden;
	
	transition: height ease-in-out 500ms; /* css3 transition */
	-o-transition: height ease-in-out 500ms;
	-moz-transition: height ease-in-out 500ms;
	-webkit-transition: height ease-in-out 500ms;
	
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	margin-bottom: 2px;
}
#accordion a {
	display: block;
	height: 20px;
	line-height: 20px;
	
	
	padding: 5px;
	
	text-decoration: none;
}
#accordion p {
	height: 150px;
	padding: 5px;
}
#accordion div:hover {
	height: 180px; /* height = total height of A and P elements */
}
#accordion div:hover a {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
	<a href="http://www.deluxeblogtips.com/2010/04/accordion-menu-css3-transition.html">Return to article</a>
	<div id="accordion">
		<div class="item">
			<a href="#">Products</a>
			<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
		</div>
		<div class="item">
			<a href="#">Highlight</a>
			<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
		</div>
		<div class="item">
			<a href="#">News</a>
			<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
		</div>
		<div class="item">
			<a href="#">Contact</a>
			<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
		</div>
	</div>
</div>
</body>
</html>